// 物流配置 物流商
<template>
  <div>
    <div class="providers">
      <a-button type="primary" @click="addProviders">新增物流商</a-button>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table :data-source="providersData">
        <a-table-column
          key="serviceName"
          data-index="serviceName"
          align="center"
          width="25%"
        >
          <span slot="title"> 物流商</span>
          <template slot-scope="text, record">
            {{ record.serviceName }}
          </template>
        </a-table-column>
        <a-table-column
          key="isEnable"
          data-index="isEnable"
          align="center"
          width="25%"
        >
          <span slot="title"> 是否启用</span>
          <template slot-scope="text, record">
            <a-checkbox
              style="margin-bottom: 10px"
              :checked="record.isEnableInquiry == 0"
              @change="(e) => onChangeIsEnableInquiry(e, 'change', record)"
            >
              启用询价
            </a-checkbox>
            <br />
            <a-checkbox
              :checked="record.isEnablePrint == 0"
              @change="(e) => onChangeIsEnablePrint(e, 'change', record)"
            >
              启用打单
            </a-checkbox>
          </template>
        </a-table-column>
        <a-table-column
          key="wayList"
          class="way-list"
          data-index="wayList"
          align="center"
          width="25%"
        >
          <span slot="title"> 物流服务方式</span>
          <template slot-scope="text, record">
            <div v-for="(item, index) in record.wayList" :key="index">
              <a-checkbox
                style="margin-bottom: 10px"
                :checked="item.isDisable == 0"
                @change="(e) => changeListEnable(e, item)"
              >
                {{ item.wayName }}
              </a-checkbox>
            </div>
          </template>
        </a-table-column>
        <a-table-column
          key="action"
          data-index="action"
          align="center"
          width="25%"
        >
          <span slot="title">操作</span>
          <template slot-scope="text, record">
            <a
              slot="action"
              href="javascript:;"
              style="color: #0000ff; border-bottom: 1px solid #0000ff"
              @click="editProviders(record)"
              >编辑</a
            >
            <a-divider type="vertical" />
            <a
              slot="action"
              href="javascript:;"
              style="color: #0000ff; border-bottom: 1px solid #0000ff"
              @click="addservice(record)"
              >添加物流服务方式</a
            >
          </template>
        </a-table-column>
      </a-table>
      <!-- 分页器 -->
      <div style="margin: 20px 0; text-align: center">
        <a-config-provider>
          <a-pagination
            show-size-changer
            :pageSizeOptions="['10', '20', '30']"
            :show-total="
              (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
            "
            @showSizeChange="showChange"
            :buildOptionText="
              (props) =>
                ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
            "
            show-quick-jumper
            :default-current="searchData.current"
            :total="total"
            @change="onChangePage"
          />
        </a-config-provider>
      </div>
    </a-spin>
    <a-modal v-model="provider" title="新增物流商">
      <template slot="footer" class="modelBtn">
        <a-button
          @click="cancle1"
          style="background: #d7d7d7; color: #fff; border: none"
          >取消</a-button
        >

        <a-button :loading="loading" type="primary" @click="handleOk('addpro')"
          >确认</a-button
        >
      </template>
      <div style="padding: 24px; padding-bottom: 5px">
        <a-form-model
          class="fromData"
          ref="addForm"
          :model="addForm"
          :rules="addRules"
        >
          <a-form-model-item label="物流名称" prop="serviceName">
            <a-input
              style="width: 200px"
              v-model="addForm.serviceName"
              :maxLength="120"
            />
          </a-form-model-item>
          <a-form-model-item label="是否启用">
            <a-checkbox
              :checked="addForm.isEnableInquiry == 0"
              @change="(e) => onChangeIsEnableInquiry(e, 'add')"
            >
              启用询价
            </a-checkbox>
            <a-checkbox
              :checked="addForm.isEnablePrint == 0"
              @change="(e) => onChangeIsEnablePrint(e, 'add')"
            >
              启用打单
            </a-checkbox>
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-modal>
    <a-modal v-model="service" title="添加服务方式">
      <template slot="footer" class="modelBtn">
        <a-button
          @click="cancel2"
          style="background: #d7d7d7; color: #fff; border: none"
          >取消</a-button
        >
        <a-button :loading="loading" type="primary" @click="handleOk('addser')"
          >确认</a-button
        >
      </template>
      <div v-if="plainOptions.length == 0">暂无数据</div>
      <a-checkbox
        v-else
        v-for="(item, index) in plainOptions"
        :key="index"
        @change="(e) => onChangeservice(e, item)"
      >
        {{ item.wayName }}
      </a-checkbox>
    </a-modal>
  </div>
</template>

<script>
import {
  log_searchTabList,
  pro_saveInfo,
  pro_searchOneInfo,
  pro_editInfo,
  pro_saveSerWay,
  pro_editSerInfo,
  pro_searchItemList,
} from "@/apis/system/setManage/setLogistics";
export default {
  data() {
    return {
      //添加服务项选择的数组
      services: [],
      //添加物流服务的选择项
      plainOptions: [],
      addRules: {
        serviceName: [
          {
            validator: this.checkServiceName,
            trigger: "blur",
            required: true,
          },
        ],
      },
      addSerRules: {
        wayName: [
          { required: true, message: "请填写服务名称!", trigger: "blur" },
        ],
      },
      providerTit: "新增物流商",
      serviceTit: "添加启用服务方式",
      provider: false,
      service: false,
      //物流商表格数据
      providersData: [],
      spinning: false,
      loading: false,
      total: 5,
      searchData: {
        size: 10,
        current: 1,
      },
      //新增的数据
      addForm: {
        serviceName: "",
        isEnableInquiry: 1,
        isEnablePrint: 1,
      },
      addserForm: {
        wayName: "",
        isDisable: 1,
      },
      handleFlag: "add",
    };
  },
  created() {
    this.getTabList();
  },
  methods: {
    //验证物流商
    checkServiceName(rule, value, callback) {
      if (!value) {
        callback(new Error("请填写物流商！"));
      }
      this.providersData.forEach((item) => {
        if (value == item.serviceName) {
          callback(new Error("物流商已存在，请更换名字！"));
        }
      });
      callback();
    },
    //新增物流服务
    onChangeservice(e, item) {
      if (e.target.checked) {
        this.services.push({
          sysLogisticsServiceItemId: item.sysLogisticsServiceItemId,
          sysLogisticsServiceWayId: item.sysLogisticsServiceWayId,
        });
      } else {
        this.services.forEach((val, index) => {
          if (val.sysLogisticsServiceWayId == item.sysLogisticsServiceWayId) {
            this.services.splice(index, 1);
          }
        });
      }
    },
    //关闭新增物流商
    cancle1() {
      this.provider = false;
      this.addForm = {
        serviceName: "",
        isEnableInquiry: 1,
        isEnablePrint: 1,
      };
    },
    cancel2() {
      this.service = false;
      this.plainOptions = [];
      this.services = [];
      this.addserForm = {
        wayName: "",
        isDisable: 1,
      };
    },
    //新增物流服务
    addservice(record) {
      this.serchNotSerList(record.sysLogisticsServiceItemId);
      this.service = true;
    },
    //查询未添加的服务方式
    async serchNotSerList(id) {
      let res = await pro_searchItemList(id);
      if (res.code == "200") {
        this.plainOptions = res.responseBody;
      }
      this.plainOptions.forEach((item) => {
        item.sysLogisticsServiceItemId = id;
      });
    },
    //及时修改物流服务的方法
    async changeListEnable(e, record) {
      if (e.target.checked) {
        record.isDisable = "0";
        let res = await pro_editSerInfo(
          record.sysLogisticsServiceItemId,
          record.sysLogisticsServiceWayId,
          { isDisable: 0 }
        );
        if (res.code == "10000") {
          this.getTabList();
        }
      } else {
        record.isDisable = "1";
        let res = await pro_editSerInfo(
          record.sysLogisticsServiceItemId,
          record.sysLogisticsServiceWayId,
          { isDisable: 1 }
        );
        if (res.code == "10000") {
          this.getTabList();
        }
      }
    },
    //新增时是否启用询价
    async onChangeIsEnableInquiry(e, flag, record) {
      if (flag == "add") {
        if (e.target.checked) {
          this.addForm.isEnableInquiry = 0;
        } else {
          this.addForm.isEnableInquiry = 1;
        }
      } else if (flag == "change") {
        if (e.target.checked) {
          record.isEnableInquiry = 0;
          let res = await pro_editInfo(record.sysLogisticsServiceItemId, {
            isEnableInquiry: "0",
          });
          if (res.code == "10000") {
            this.getTabList();
          } else {
            return false;
          }
        } else {
          record.isEnableInquiry = 1;
          let res = await pro_editInfo(record.sysLogisticsServiceItemId, {
            isEnableInquiry: "1",
          });
          if (res.code == "10000") {
            this.getTabList();
          } else {
            return false;
          }
        }
      }
    },
    //新增时是否启用打单
    async onChangeIsEnablePrint(e, flag, record) {
      if (flag == "add") {
        if (e.target.checked) {
          this.addForm.isEnablePrint = 0;
        } else {
          this.addForm.isEnablePrint = 1;
        }
      } else if (flag == "change") {
        if (e.target.checked) {
          record.isEnablePrint = 0;
          let res = await pro_editInfo(record.sysLogisticsServiceItemId, {
            isEnablePrint: "0",
          });
          if (res.code == "10000") {
            this.getTabList();
          } else {
            return false;
          }
        } else {
          record.isEnablePrint = 1;
          let res = await pro_editInfo(record.sysLogisticsServiceItemId, {
            isEnablePrint: "1",
          });
          if (res.code == "10000") {
            this.getTabList();
          } else {
            return false;
          }
        }
      }
    },
    //新增物流商按钮
    addProviders() {
      this.addForm = {
        serviceName: "",
        isEnableInquiry: 1,
        isEnablePrint: 1,
      };
      this.provider = true;
    },
    //编辑每一行信息
    async editProviders(record) {
      this.providerTit = "修改物流商";
      let res = await pro_searchOneInfo(record.sysLogisticsServiceItemId);
      if (res.code == "200") {
        this.handleFlag = "edit";
        this.addForm = res.responseBody;
        this.provider = true;
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber * 1;
      this.getTabList();
    },
    //页码变更
    showChange(current, size) {
      this.searchData.current = current * 1;
      this.searchData.size = size * 1;
      this.getTabList();
    },
    async handleOk(flag) {
      this.loading = true;
      if (flag == "addpro") {
        this.$refs.addForm.validate(async (valid) => {
          if (valid) {
            if (this.handleFlag == "add") {
              let res = await pro_saveInfo(this.addForm);
              if (res.code == "10000") {
                this.getTabList();
                this.loading = false;
                this.provider = false;
              }
            } else if (this.handleFlag == "edit") {
              let res = await pro_editInfo(
                this.addForm.sysLogisticsServiceItemId,
                this.addForm
              );
              if (res.code == "10000") {
                this.getTabList();
                this.loading = false;
                this.cancle1();
              }
            }
          } else {
            this.loading = false;
            return false;
          }
        });
      } else if (flag == "addser") {
        if (this.services.length == 0) {
          this.cancel2();
          this.loading = false;
          return false;
        }
        let res = await pro_saveSerWay(this.services);
        if (res.code == "10000") {
          this.loading = false;
          this.getTabList();
          this.cancel2();
        }
      }
    },
    async getTabList() {
      this.spinning = true;
      let res = await log_searchTabList(this.searchData);
      if (res.code == "200") {
        this.total = res.responseBody.total * 1;
        this.searchData.size = res.responseBody.size * 1;
        this.providersData = res.responseBody.records;
        this.spinning = false;
      }
    },
  },
  computed: {
    providersColumns() {
      return [
        {
          title: "物流商",
          dataIndex: "serviceName",
          align: "center",
          width: "25%",
        },
        {
          title: "是否启用",
          dataIndex: "isEnable",
          scopedSlots: { customRender: "isEnable" },
          align: "center",
          width: "25%",
        },
        {
          title: "物流服务方式",
          dataIndex: "wayList",
          scopedSlots: { customRender: "wayList" },
          align: "center",
          width: "25%",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: "25%",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
// 物流服务方式字体对齐
// /deep/.ant-table-tbody {
//   .ant-table-row {
//     .way-list {
//       text-align: left !important;
//     }
//   }
// }
/deep/.ant-checkbox-group {
  width: 100%;
  .ant-col {
    margin-bottom: 10px;
  }
}
.providers {
  margin: 10px 0;
}
/deep/.fromData {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .ant-form-item {
    display: flex;
    .ant-form-item-label {
      width: 120px;
      text-align: right;
    }
    .ant-form-item-control-wrapper {
      width: 100%;
      .ant-form-item-children {
        display: flex;
        width: 100%;
        .ant-checkbox-wrapper {
          flex: 1;
        }
      }
    }
  }
}
/deep/.ant-modal-footer {
  display: flex;
  justify-content: center;
  .ant-btn {
    margin-right: 10px;
  }
}
</style>
